<template>
  <div :class="$style.chartModal">
    <div :class="$style.chartArea">
      <img :class="[$style.chartArrow, $style.chartArrow1]" src="/chartarrow1.png" alt="" @click="changeLeft" />
      <img :class="[$style.chartArrow, $style.chartArrow2]" src="/chartarrow2.png" alt="" @click="changeRight" />
      <img :class="[$style.chartArrow, $style.chartArrow3]" src="/chartarrow3.png" alt="" @click="changeBottom" />
      <div :class="$style.optionBox">
        <lay-select v-model="type1" placeholder="请选择" @change="changeType1">
          <lay-select-option v-for="(item, index) in typeList1" :key="index" :value="item.id" :label="item.name"></lay-select-option>
        </lay-select>
        <lay-select v-model="type2" placeholder="请选择" @change="changeType2">
          <lay-select-option v-for="(item, index) in typeList2" :key="index" :value="item.id" :label="item.name"></lay-select-option>
        </lay-select>
        <div :class="$style.optionBtn">
          <span :class="$style.optionBtnText">指标</span>
        </div>
        <div :class="$style.optionBtn">
          <img :class="$style.optionBtnIcon" src="/fangda.png" alt="" />
        </div>
        <div :class="$style.optionBtn">
          <img :class="$style.optionBtnIcon" src="/suoxiao.png" alt="" />
        </div>
        <div :class="$style.optionBtn">
          <img :class="$style.optionBtnIcon" src="/xiangzuo.png" alt="" />
        </div>
        <div :class="$style.optionBtn">
          <img :class="$style.optionBtnIcon" src="/xiangyou.png" alt="" />
        </div>
        <div :class="$style.optionBtn">
          <img :class="$style.optionBtnIcon" src="/caijian.png" alt="" />
        </div>
        <div :class="$style.optionBtn">
          <img :class="$style.optionBtnIcon" src="/quanping.png" alt="" />
        </div>
      </div>
      <div :class="$style.chartTitle">EURUSD</div>
      <div :class="$style.chartExplain">
        <span :class="$style.chartExplainLi">时间：2024-04-26 13:37</span>
        <span :class="$style.chartExplainLi">开盘：1.07254</span>
        <span :class="$style.chartExplainLi">收盘：1.07254</span>
        <span :class="$style.chartExplainLi">最高：1.07254</span>
        <span :class="$style.chartExplainLi">最低：1.07254</span>
      </div>
      <div :class="$style.chartBox">
        <div id="chart" style="width: 100%; height: 100%;"></div>
      </div>
    </div>
    <div :class="$style.tableArea" v-show="bottomFlag">
      <lay-tab type="card" v-model="tabId" @change="changeTab">
        <lay-tab-item v-for="(item, index) in tabList" :key="index" :title="item.name" :id="item.id">
          <lay-table :columns="columnList" :data-source="dataList">
          </lay-table>
        </lay-tab-item>
      </lay-tab>
    </div>
  </div>
</template>
<script>
import * as echarts from 'echarts';
import { defineComponent } from "vue";
export default defineComponent({
  name: "ChartModal",
  data() {
    return {
      type1: '1',
      typeList1: [
        { id: '1', name: '1m' },
        { id: '2', name: '5m' },
        { id: '3', name: '15m' },
        { id: '4', name: '30m' },
        { id: '5', name: '1H' },
        { id: '6', name: '1D' },
      ],
      type2: '1',
      typeList2: [
        { id: '1', name: '全实心' },
        { id: '2', name: '全空心' },
        { id: '3', name: '跌空心' },
        { id: '4', name: '涨空心' },
        { id: '5', name: 'OHLC' },
        { id: '6', name: '面积图' },
      ],
      bottomFlag: true,
      tabId: '1',
      tabList: [
        { id: '1', name: '持仓' },
        { id: '2', name: '委托' },
        { id: '3', name: '历史' },
        { id: '4', name: '期权持仓' },
        { id: '5', name: '期权历史' },
      ],
      columnList: [],
      dataList: [
        // {name1:'111',name2:'222',name3:'333',name4:'444',name5:'555'},
        // {name1:'111',name2:'222',name3:'333',name4:'444',name5:'555'},
      ],
      column1: [
        { title: '订单号', width: '', key: 'name1' },
        { title: '交易对', width: '', key: 'name2' },
        { title: '购买方向', width: '', key: 'name3' },
        { title: '收益', width: '', key: 'name4' },
        { title: '止盈', width: '', key: 'name5' },
        { title: '止损', width: '', key: 'name6' },
        { title: '开仓价', width: '', key: 'name7' },
        { title: '现价', width: '', key: 'name8' },
        { title: '手数', width: '', key: 'name9' },
        { title: '杠杆', width: '', key: 'name10' },
        { title: '手续费', width: '', key: 'name11' },
        { title: '保证金', width: '', key: 'name12' },
        { title: '操作', width: '', key: '', fixed: 'right' },
      ],
      column2: [
        { title: '订单号', width: '', key: 'name1' },
        { title: '交易对', width: '', key: 'name2' },
        { title: '购买方向', width: '', key: 'name3' },
        { title: '止盈', width: '', key: 'name5' },
        { title: '止损', width: '', key: 'name6' },
        { title: '开仓价', width: '', key: 'name7' },
        { title: '现价', width: '', key: 'name8' },
        { title: '手数', width: '', key: 'name9' },
        { title: '杠杆', width: '', key: 'name10' },
        { title: '手续费', width: '', key: 'name11' },
        { title: '保证金', width: '', key: 'name12' },
        { title: '操作', width: '', key: '', fixed: 'right' },
      ],
      column3: [
        { title: '订单号', width: '', key: 'name1' },
        { title: '交易对', width: '', key: 'name2' },
        { title: '购买方向', width: '', key: 'name3' },
        { title: '收益', width: '', key: 'name4' },
        { title: '止盈', width: '', key: 'name5' },
        { title: '止损', width: '', key: 'name6' },
        { title: '开仓价', width: '', key: 'name7' },
        { title: '现价', width: '', key: 'name8' },
        { title: '手数', width: '', key: 'name9' },
        { title: '杠杆', width: '', key: 'name10' },
        { title: '手续费', width: '', key: 'name11' },
        { title: '保证金', width: '', key: 'name12' },
      ],
      column4: [
        { title: '交易对', width: '', key: 'name1' },
        { title: '购买方向', width: '', key: 'name2' },
        { title: '金额', width: '', key: 'name3' },
        { title: '时长', width: '', key: 'name4' },
        { title: '剩余时间', width: '', key: 'name5' },
        { title: '下单时间', width: '', key: 'name6' },
      ],
      column5: [
        { title: '交易对', width: '', key: 'name1' },
        { title: '购买方向', width: '', key: 'name2' },
        { title: '收益', width: '', key: 'name3' },
        { title: '时长', width: '', key: 'name4' },
        { title: '下单时间', width: '', key: 'name5' },
        { title: '结算时间', width: '', key: 'name6' },
      ],
      myChart: null,
      option: null,

    };
  },
  methods: {
    changeTab() {
      let name = 'column' + this.tabId;
      this.columnList = this[name];
    },
    changeType2() {

    },
    changeType1() {

    },
    changeBottom() {
      this.bottomFlag = !this.bottomFlag;
      if (this.myChart && this.myChart.dispose) {
        this.myChart.dispose();
      }
      setTimeout(()=>{
        this.initChart();
      },100)
    },
    changeRight() {
      this.$emit('changeRight');
      if (this.myChart && this.myChart.dispose) {
        this.myChart.dispose();
      }
      setTimeout(()=>{
        this.initChart();
      },100)
    },
    changeLeft() {
      this.$emit('changeLeft');
      if (this.myChart && this.myChart.dispose) {
        this.myChart.dispose();
      }
      setTimeout(()=>{
        this.initChart();
      },100)
    },
    initChart() {
      this.myChart = null;
      this.option = null;
      let chartDom = document.getElementById('chart');
      this.myChart = echarts.getInstanceByDom(chartDom);
      if (!this.myChart) {
        this.myChart = echarts.init(chartDom);
      }
      this.option = {
        xAxis: {
          data: ['2017-10-24', '2017-10-25', '2017-10-26', '2017-10-27']
        },
        yAxis: {},
        series: [
          {
            type: 'candlestick',
            data: [
              [20, 34, 10, 38],
              [40, 35, 30, 50],
              [31, 38, 33, 44],
              [38, 15, 5, 42]
            ]
          }
        ]
      };
      this.option && this.myChart.setOption(this.option);
    },
    show() {
      this.initChart();
    },
  },
  created() {
    this.columnList = this.column1;
  },
});
</script>
<style module>
.chartModal {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  min-width: 693px;
}

.chartArea {
  width: 100%;
  flex: 1;
  position: relative;
  background-color: #FFFFFF;
  box-sizing: border-box;
  padding: 10px;
}

.chartArrow1 {
  width: 10px;
  height: 100px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  cursor: pointer;
  z-index: 100;
}

.chartArrow2 {
  width: 10px;
  height: 100px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0;
  cursor: pointer;
  z-index: 100;
}

.chartArrow3 {
  width: 100px;
  height: 10px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  cursor: pointer;
  z-index: 100;
}

.optionBox {
  width: 100%;
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.optionBtn {
  height: 30px;
  border-radius: 3px;
  background-color: #F6F7FA;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 0 16px;
  margin-right: 10px;
}

.optionBtnText {
  font-family: Source Han Sans;
  font-size: 14px;
  font-weight: 300;
  color: #606266;
}

.optionBtnIcon {
  width: 18px;
  height: 18px;
}

.chartTitle {
  width: 100%;
  font-family: Arial;
  font-size: 16px;
  font-weight: normal;
  color: #000000;
  margin-bottom: 10px;
}

.chartExplain {
  width: 100%;
  display: flex;
  align-items: center;
  margin-bottom: 7px;
}

.chartExplainLi {
  font-family: Source Han Sans;
  font-size: 14px;
  font-weight: 300;
  color: #515A6E;
  margin-left: 40px;
}

.chartExplainLi:first-child {
  margin-left: 0;
}

.chartBox {
  width: 100%;
  height: calc(100% - 104px);
}

.tableArea {
  width: 100%;
  background-color: #FFFFFF;
  box-sizing: border-box;
  padding: 10px;
  margin-top: 5px;
}
</style>
<style scoped>
.layui-select {
  width: 115px;
  margin-right: 10px;
}

.layui-select :deep(.layui-input) {
  height: 30px;
}
</style>
